<template>
  <div class="SearchContainer">
      <van-loading class="loading" v-show="IsLongding===false" type="spinner" size="24px">加载中...</van-loading>
    <!-- 标题 -->
    <div class="SearchContainer-title">
      <form action="/">
        <van-search
          v-model="placeholder"
          show-action
          :placeholder="placeholder"
          shape="round"
          @focus="focus"
          @cancel="cancel"
        />
      </form>
    </div>

    <!-- 筛选 -->
    <div class="SearchContain-screen">
      <van-dropdown-menu active-color="#1989fa">
        <van-dropdown-item ref="item" :title="defaultName" v-model="value1">
          <div class="screen-box-item">
            <div class="screen-box-item1" :class="{activeColor:order===item.id}" @click="change(item.name,item.id)" v-for="(item,index) in defaultData" :key="index">{{item.name}}</div>
          </div>
        </van-dropdown-item>
        <van-dropdown-item ref="item1" :title="allName" v-model="value2">
          <div class="screen-box-item">
            <div class="screen-box-item1" :class="{activeColor:styleId===item.id}" @click="onConfirm1(item.name,item.id)" v-for="(item,index) in allData" :key="index">{{item.name}}</div>
          </div>
        </van-dropdown-item>
        <van-dropdown-item ref="item2" :title="screeName" v-model="value2">
          <div class="filter-item">
            <div class="filter-item-div" :class="{activeColor:areaId===item.id}" @click="onConfirm3(item.name,item.id)" v-for="(item,index) in screeAreas" :key="index">{{item.name}}</div>
          </div>
        <div class="filter-item">
            <div class="filter-item-div" :class="{activeColor:isFinish===item.id}" @click="onConfirm4(item.name,item.id)" v-for="(item,index) in screeStatus" :key="index">{{item.name}}</div>
        </div>
        <div class="filter-item">
            <div class="filter-item-div" :class="{activeColor:isFree===item.id}" @click="onConfirm5(item.name,item.id)" v-for="(item,index) in screePrices" :key="index">{{item.name}}</div>
        </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <div class="SearchContain-container">
        <van-list
             v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
        >
      <div v-show="item.vertical_cover != ''" class="container-div" v-for="(item,index) in getSerachData" :key="index" @click="toUser(item)">
        <div class="container-div-img" v-if="item.vertical_cover != ''">
          <img :src="item.vertical_cover" alt="" />
        </div>
        <div class="container-div-right auto-text" v-if="item.vertical_cover != ''">
          <div class="div-right-top auto-text" v-html="item.title">{{item.title}}</div>
          <div class="div-right-bottom">
              <div><span v-html="item.author_name[0]">{{item.author_name[0]}}</span>&nbsp;<span v-html="item.author_name[1]">{{item.author_name[1]}}</span></div>
            <div>{{item.styles[0]}}</div>
            <div v-if="item.is_finish===1">已完结</div>
            <div v-if="item.is_finish===0">连载中</div>
          </div>
        </div>
      </div>
        </van-list>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchContainer",
  data() {
    return {
        loading: false,
        finished: false,
        // 加载是否完成
        IsLongding:false,
        // 关键字
        placeholder: "",
        value1: 0,
        value2: "",
        // 默认排序
        defaultData:[],
        // 默认排序名字
        defaultName:'默认排序',
        // 全部分类的名字
        allName:"全部分类",
        // 筛选名字
        screeName:"筛选",
        //   全部分类
        allData:[],
        // 筛选
        // scree:[],
        screeAreas:[],
        screeAreasName:'',

        screePrices:[],
        screePricesName:'',

        screeStatus:[],
        screeStatusName:'',

        // 标识符
        styleId:-1,
        areaId:-1,
        isFinish:-1,
        order:-1,
        isFree:-1,


    //   触底加载的page
        pageNum:0,
        // 页数
        pageSize:20,

    // 数据
        getSerachData:[]
    
    };
  },
  created() {
    this.placeholder = this.$route.query.name;
    
    this.getSerachContainerData();
    this.allLabel()
  },
  methods: {

    // 筛选请求
    screeData(){
      //   发起请求
        this.axios({
            methods:'GET',
            url:"Search",
            params:{
                styleId:this.styleId,
                areaId:this.areaId,
                isFinish:this.isFinish,
                order:this.order,
                pageNum:1,
                pageSize:this.pageSize,
                isFree:this.isFree,
                keyWord:this.placeholder
            }
        }).then(res=>{
          if(res.data.data.list.length===0){
              this.$toast('暂没内容');
          }
            this.getSerachData = res.data.data.list
        }).catch(err=>{
          
        })
    },
    change(value,id) {
      this.$refs.item.toggle();
      if(this.order === id){
          return
      }
      this.order = id;
      this.defaultName = value;
      this.screeData()
    },
    onConfirm1(value,id){
        this.$refs.item1.toggle();
        if(this.styleId === id){
          return
      }
      this.styleId = id;
      this.allName = value;

      this.screeData()
    },
    onConfirm3(value,id){
        if(this.areaId === id){
            return;
        }
        this.areaId = id;
        this.screeAreasName = value;

        this.screeData()
    },
    onConfirm4(value,id){
        if(this.isFinish === id){
            return;
        }
        this.isFinish = id;
        this.screeStatusName = value;
        //   发起请求
        this.screeData()
    },
    onConfirm5(value,id){
        if(this.isFree === id){
            return;
        }
        this.isFree = id;
        this.screePricesName = value;
        //   发起请求
        this,this.screeData()
    },
    // 发起请求
    getSerachContainerData(){
        this.axios({
            methods:'GET',
            url:'https://apis.netstart.cn/bcomic/Search?styleId=-1&pageNum=1&pageSize=20&isFree=-1',
            params:{
                keyWord:this.placeholder
            }
        }).then(result=>{
            this.IsLongding = true;
            if(result.status === 200){
                this.getSerachData = result.data.data.list;
            }
        })
    },
    // 触底加载
    onLoad() {
             this.pageNum++;
            this.axios({
                methods:'GET',
                url:'https://apis.netstart.cn/bcomic/Search?styleId=-1&',
                params:{
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                    isFree:-1,
                    keyWord:this.placeholder
                }
            }).then(result=>{
                if(result.status === 200){
                    if(result.data.data.list.length === 0){
                        this.finished = true;
                        return;
                    }
                    this.loading = false;
                    this.getSerachData.push(...result.data.data.list)
                }
            })
    },
    // 筛选栏
    allLabel(){
        this.axios({
            methods:"GET",
            url:"AllLabel",
            params:{}
        }).then(result=>{
            this.defaultData = result.data.data.orders;
            this.defaultData.unshift({
                id: -1,
                name: "默认推荐"
            })
            this.allData = result.data.data.styles;
            this.allData.unshift({id:-1,name:"全部"})

            this.screeAreas = result.data.data.areas;
            this.screeAreas.unshift({id:-1,name:"全部"});

            this.screePrices = result.data.data.prices;
            this.screePrices.unshift({id:-1,name:"全部"});

            this.screeStatus = result.data.data.status;
            this.screeStatus.unshift({id:-1,name:"全部"});
        })
    },

    // 点击搜索框
    focus(){
      this.$router.back()
    },
    // 点击取消
    cancel(){
      this.$router.go(-1);
    },

    // 跳转用户页面
    toUser(item){
      
      this.$router.push({name:'CartoonContainer',query:{id:item.id}})
    }
  },
};
</script>

<style lang="less" scoped>
    /deep/.keyword{
    font-style:normal;
    color: #33AAFA;
}
.activeColor{
    color: #33AAFA;
}
.loading{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
/deep/.van-dropdown-menu__bar {
  border-bottom: 1px solid #eaeaea;
}
/deep/.van-overlay {
  opacity: 0;
  animation: 0;
}
/deep/.van-ellipsis {
  font-size: 12px;
}
.SearchContain-container {
  height: calc(100vh - 104px);
  overflow-y: auto;
  .container-div {
    padding: 10px 15px;
    display: flex;
    .container-div-img {
      height: 110px;
      border-radius: 5px;
      > img {
        height: 100%;
        border-radius: 5px;
        overflow: hidden;
        display: block;
      }
    }
    .container-div-right{
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .div-right-top{
            font-size: 15px;
        }
        .div-right-bottom{
            color: #9D9CA1;
        }

    }
  }
}
.filter-item {
  display: flex;
  .filter-item-div {
    width: 60px;
    padding: 10px 5px;
    text-align: center;
  }
}
.SearchContainer {
  .SearchContainer-title {
    border-bottom: 1px solid #eaeaea;
  }
  .SearchContain-screen {
    .screen-box-item {
      display: flex;
      flex-wrap: wrap;
      // padding-left: 20px;
      .screen-box-item1 {
        width: 70px;
        padding: 10px 10px;
        text-align: center;
        // padding: 10px 15px;
      }
    }
  }
}
</style>